Is there a way to specify a CSS3 transition to occur only on :hover and when returning from hover, not on every event? [closed]
Posted
by
Steve
on Pro Webmasters
See other posts from Pro Webmasters
or by Steve
Published on 2011-01-08T19:30:54Z
Indexed on
2011/01/08
20:00 UTC
Read the original article
Hit count: 179
css3
You could define the transition on the :hover
event, which causes the browser to render only the effect into the hover and not out of it.
a:hover {
transition...
}
Using scale as an example, an image being scaled up would scale up on hover, but go straight back down without any transition when the cursor leaves the image.
Or, you can set the transition on the element directly:
a {
transition...
}
Which by definition means any change that effects the scale of the element such as any developer set styles will work, but also the user zooming in and out the page, will cause there to be a transition.
All the tutorials being spewed onto the internet at the moment point to using the latter, but wouldn't one consider this a usability flaw for anyone wanting to resize the page or taking any other action that may cause similar scenarios?
Pages with large amounts of transitional hover scaling can go pretty mental if you zoom in and out of them.
© Pro Webmasters or respective owner